<template>
    <div class="workspace-dashboard">
        <!-- 统计卡片 -->
        <div class="dashboard-section stat-cards">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-row :gutter="15" type="flex" justify="space-between">
                        <el-col :xs="24" :sm="12" :md="8" :lg="4.7" v-for="(item, index) in statCards" :key="index">
                            <el-card shadow="hover" class="stat-card">
                                <div class="stat-content">
                                    <div class="stat-icon" :style="{ backgroundColor: item.bgColor }">
                                        <i :class="item.icon" :style="{ color: item.iconColor }"></i>
                                    </div>
                                    <div class="stat-info">
                                        <div class="stat-title">{{ item.title }}</div>
                                        <div class="stat-value">{{ item.value }}</div>
                                        <div class="stat-actions">
                                            <el-button type="text" class="stat-action">查看</el-button>
                                            <el-button type="text" class="stat-action">添加</el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>

        <!-- 快捷操作 -->
        <div class="dashboard-section quick-actions">
            <div class="section-header">
                <span class="section-title">快捷操作</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="3" v-for="(action, index) in quickActions" :key="index">
                    <div class="quick-action-item">
                        <div class="quick-action-icon" :style="{ backgroundColor: action.bgColor }">
                            <i :class="action.icon" :style="{ color: action.iconColor }"></i>
                        </div>
                        <div class="quick-action-text">{{ action.text }}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 数据统计和通知 -->
        <el-row :gutter="20" class="dashboard-panels">
            <!-- 数据统计 -->
            <el-col :span="16">
                <el-card shadow="hover" class="dashboard-panel data-statistics">
                    <div class="section-header">
                        <span class="section-title">数据概况</span>
                    </div>
                    <div class="data-grid">
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="(item, index) in dataStats.slice(0, 4)" :key="index">
                                <div class="stat-item">
                                    <div class="stat-item-label">{{ item.label }}</div>
                                    <div class="stat-item-value">{{ item.value }}</div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="(item, index) in dataStats.slice(4)" :key="index + 4">
                                <div class="stat-item">
                                    <div class="stat-item-label">{{ item.label }}</div>
                                    <div class="stat-item-value">{{ item.value }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            
            <!-- 通知列表 -->
            <el-col :span="8">
                <el-card shadow="hover" class="dashboard-panel notification-list">
                    <div class="section-header">
                        <span class="section-title">今日通知</span>
                    </div>
                    <ul class="notification-items">
                        <li class="notification-item" v-for="(notice, index) in notifications" :key="index">
                            <div class="notification-content">
                                <span class="notification-badge">{{ notice.type }}</span>{{ notice.content }}
                            </div>
                            <div class="notification-time">{{ notice.time }}</div>
                        </li>
                    </ul>
                    <div class="view-more">
                        <el-button type="text" class="view-more-link">查看更多 <i class="el-icon-arrow-right"></i></el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceDashboard',
    data() {
        return {
            statCards: [
                { title: '社区', value: '38个', icon: 'el-icon-s-home', bgColor: '#ECF5FF', iconColor: '#409EFF' },
                { title: '楼栋', value: '123个', icon: 'el-icon-office-building', bgColor: '#F0F9EB', iconColor: '#67C23A' },
                { title: '房屋', value: '1,000', icon: 'el-icon-house', bgColor: '#FDF6EC', iconColor: '#E6A23C' },
                { title: '住户', value: '4,000', icon: 'el-icon-user', bgColor: '#FEF0F0', iconColor: '#F56C6C' },
                { title: '车位', value: '443', icon: 'el-icon-truck', bgColor: '#F5F7FA', iconColor: '#909399' }
            ],
            quickActions: [
                { text: '物业管理', icon: 'el-icon-office-building', bgColor: '#ECF5FF', iconColor: '#409EFF' },
                { text: '缴费管理', icon: 'el-icon-wallet', bgColor: '#F0F9EB', iconColor: '#67C23A' },
                { text: '房屋管理', icon: 'el-icon-house', bgColor: '#FDF6EC', iconColor: '#E6A23C' },
                { text: '业主管理', icon: 'el-icon-user', bgColor: '#FEF0F0', iconColor: '#F56C6C' },
                { text: '车辆出入管理', icon: 'el-icon-truck', bgColor: '#FFF6F7', iconColor: '#FA8C9D' }
            ],
            dataStats: [
                { label: '待审核业主', value: '2,002' },
                { label: '待处理报修', value: '123' },
                { label: '待处理投诉', value: '234' },
                { label: '待处理建议', value: '13' },
                { label: '本月营收', value: '133' },
                { label: '本月支出', value: '13' }
            ],
            notifications: [
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' },
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' },
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' },
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' },
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' },
                { type: '【通知公告】', content: '物业缴费系统正式上线!', time: '2021-06-22 09:00' }
            ]
        }
    }
}
</script>

<style scoped>
.workspace-dashboard {
    width: 100%;
}

.dashboard-section {
    margin-bottom: 20px;
}

/* Section header styling */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 10px;
}

.section-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #409EFF;
    border-radius: 2px;
}

/* Stat cards styling */
.stat-card {
    height: 115px;
    padding: 15px;
    transition: all 0.3s;
    margin-bottom: 15px;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-content {
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 22px;
}

.stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stat-title {
    color: #606266;
    font-size: 14px;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
}

.stat-actions {
    display: flex;
    margin-top: auto;
}

.stat-action {
    font-size: 12px;
    padding: 0;
    margin-right: 12px;
    height: auto;
    color: #409EFF;
}

/* Quick actions styling */
.quick-actions {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.quick-action-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.quick-action-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.quick-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.quick-action-icon i {
    font-size: 24px;
}

.quick-action-text {
    font-size: 14px;
    color: #606266;
}

/* Dashboard panels styling */
.dashboard-panels {
    margin-bottom: 20px;
}

.dashboard-panel {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.data-grid {
    padding: 10px 0;
}

.stat-item {
    margin-bottom: 15px;
    border-left: 3px solid #ebeef5;
    padding-left: 15px;
    transition: all 0.3s;
}

.stat-item:hover {
    border-left-color: #409EFF;
}

.stat-item-label {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
}

.stat-item-value {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
}

/* Notification list styling */
.notification-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid #409EFF;
    background-color: #f9fafc;
}

.notification-badge {
    color: #409EFF;
    font-weight: bold;
    margin-right: 5px;
}

.notification-content {
    font-size: 14px;
    color: #606266;
}

.notification-time {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
}

.view-more {
    text-align: center;
    margin-top: 15px;
}

.view-more-link {
    color: #409EFF;
    font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .stat-card {
        height: auto;
        padding: 10px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-value {
        font-size: 18px;
    }
}
</style> 